<template>
	<div id="myorder">
		<van-row id="orders">
			<van-row class="orderone">
				<van-col :span="5" :offset="1" style="font-size: 1.25rem;font-weight: bold;color: black;">我的订单</van-col>
				<van-col :span="4" :offset="14">查看全部<van-icon name="arrow" /></van-col>
			</van-row>
			<van-row class="ordertwo">
				<van-col :span="4" v-for="item in five" class="orderonce">
					<van-row>
						<img :src="item.img">
					</van-row>
					<van-row>{{item.name}}</van-row>
				</van-col>
			</van-row>
		</van-row>
		<van-row>
			<recommend></recommend>
		</van-row>
	</div>
</template>

<script>
	import recommend from '@/components/home/recommend.vue'
	export default
	{
		data()
		{
			return{
				five:[
					{
						"img":"./images/订单1.png",
						"name":"待付款"
					},
					{
						"img":"./images/订单2.png",
						"name":"待发货"
					},
					{
						"img":"./images/订单3.png",
						"name":"待收货"
					},
					{
						"img":"./images/订单4.png",
						"name":"待评价"
					},
					{
						"img":"./images/订单5.png",
						"name":"退款/售后"
					}
				]
			}
		},
		components:
		{
			recommend
		}
	}
</script>

<style>
	#myorder{
		width: 100%;
		height: 100%;
	}
	#orders{
		width: 90%;
		height: 150px;
		margin-left: 5%;
		background-color: white;
		margin-top: 50px;
		border-radius: 20px;
		box-shadow: 1px 1px 5px #ccc;
	}
	.orderone{
		width: 100%;
		height: 50px;
		line-height: 50px;
		color: #999;
	}
	.ordertwo{
		margin-top: 5px;
	}
	.orderonce{
		margin-left: 3%;
	}
</style>
